<template>
  <div class="_wz_contractsSee" ref="contractsSee">
    <template  v-if="!!formDetailsData.employContent || !!formDetailsData.promiseContent || !!formDetailsData.dutyContent || !!formDetailsData.noticeContent">
      <Tabs :value="name" :animated="false">
        <TabPane label="聘用合同" name="name1" v-if="!!formDetailsData.employContent">
          <contract  :selectData="selectData1" formTitle="聘用合同"></contract>
        </TabPane>
        <TabPane label="承诺书" name="name2" v-if="!!formDetailsData.promiseContent">
          <contract  :selectData="selectData2" formTitle="承诺书"></contract>
        </TabPane>
        <TabPane label="责任状" name="name3" v-if="!!formDetailsData.dutyContent">
          <contract  :selectData="selectData3" formTitle="责任状"></contract>
        </TabPane>
        <TabPane label="告知书" name="name4" v-if="!!formDetailsData.noticeContent">
          <contract  :selectData="selectData4" formTitle="职业危害告知书"></contract>
        </TabPane>
      </Tabs>
    </template>
    <div v-else style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
      <img src="@/assets/error-page/emptyImage.svg" >
      <div style="">暂无数据</div>
    </div>
  </div>
</template>
<script>
import contract from "../educate/Employees/contract";

  export default {
    props: ['formDetailsData'],//接收来自父组件的数据
    components: {
      contract,//列表
    },
    data() {
      return {
        name:'',
        tableData: [],//表格数据
        selectData1:{
          typeName:this.formDetailsData.driverTypeName,
          coreDriverContract:{
            deptName:this.formDetailsData.deptName,
            employContent:this.formDetailsData.employContent,
            signatureImg:this.formDetailsData.signatureImg,
            signatureState:this.formDetailsData.signatureState,
          },
        },
        selectData2:{
          typeName:this.formDetailsData.driverTypeName,
          coreDriverContract:{
            deptName:this.formDetailsData.deptName,
            promiseContent:this.formDetailsData.promiseContent,
            signatureImg:this.formDetailsData.signatureImg,
            signatureState:this.formDetailsData.signatureState,
          },
        },
        selectData3:{
          typeName:this.formDetailsData.driverTypeName,
          coreDriverContract:{
            deptName:this.formDetailsData.deptName,
            dutyContent:this.formDetailsData.dutyContent,
            signatureImg:this.formDetailsData.signatureImg,
            signatureState:this.formDetailsData.signatureState,
          },
        },
        selectData4:{
          typeName:this.formDetailsData.driverTypeName,
          coreDriverContract:{
            deptName:this.formDetailsData.deptName,
            noticeContent:this.formDetailsData.noticeContent,
            signatureImg:this.formDetailsData.signatureImg,
            signatureState:this.formDetailsData.signatureState,
          },
        },
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态
    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      var that = this;
      if(!!that.formDetailsData.employContent){
        that.name == "name1"
      }else if(!!that.formDetailsData.promiseContent){
        that.name == "name2"
      }else if(!!that.formDetailsData.dutyContent){
        that.name == "name3"
      }else if(!!that.formDetailsData.noticeContent){
        that.name == "name4"
      }
    },
    methods: {//执行的方法

    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_contractsSee {
    height: 100%;
    overflow: auto;
    .ivu-form-item-label {
      color: #9e9e9e;
    }
  }
</style>
